<template>
    <div class="eduction">
        <div class="common-layout">
            <el-container>
                <el-aside width="200px">

                    <el-menu default-active="2" class="el-menu-vertical-demo" 
                        router>
                        <el-input v-model="input" placeholder="请输入学校名称" />
                        <el-sub-menu index="1" @click="changeMenu">

                            <template #title>
                                <el-icon v-if="!isCollapse">
                                    <Plus />
                                </el-icon>
                                <el-icon v-else>
                                    <Minus />
                                </el-icon>
                                <span>教育局</span>
                            </template>

                            <el-sub-menu index="1-1" @click.stop="changesubMenu">

                                <template #title>
                                    <el-icon v-if="!issubCollapse">
                                        <Plus />
                                    </el-icon>
                                    <el-icon v-else>
                                        <Minus />
                                    </el-icon>
                                    <el-menu-item route="/index/xuexiaoguanli/School/minSchool">
                                         小学
                                    </el-menu-item>
                                    <!-- <span @click="handleMin">小学</span> -->
                                </template>

                                <div @click.stop>
                                    <el-menu-item index="1-1-1" route="/index/xuexiaoguanli/School/minSchool">
                                        智慧校园
                                    </el-menu-item>
                                </div>
                                <div @click.stop>
                                    <el-menu-item index="1-1-2" route="/index/xuexiaoguanli/School/minSchool">
                                        外国语学校
                                    </el-menu-item>
                                </div>
                                <div @click.stop>
                                    <el-menu-item index="1-1-3" route="/index/xuexiaoguanli/School/minSchool">
                                        实验学校
                                    </el-menu-item>
                                </div>
                            </el-sub-menu>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script setup>
var isCollapse = ref(false)
var changeMenu = () => {
    isCollapse.value = !isCollapse.value
}
var issubCollapse = ref(false)
var changesubMenu = () => {
    issubCollapse.value = !issubCollapse.value
}
// var handleMin = ()=>{
//     route.push('')
// }
</script>


<style scoped>
/* .eduction{
    height: 100%;
} */
.el-menu {
    height: 600px;
    background-color: #fff;
    margin-right: 20px;
}

.el-main {
    height: 600px;
    background-color: #fff;
}

.eduction{
    height: 600px;
    background-color: #fff;
}

.eduction .common-layout input {
    width: 197px;
    height: 30px;
    border-radius: 5px;
    border-color: #e3e3e3;
    margin-bottom: 5px;
}
:deep(.el-menu-item):nth-child(2){
    width: 50px;
    display: flex;
    right:40px ;
    margin-right: 500px;
}
.is-active{
    text-align: left;
    padding-left: 10px;
}
</style>